<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>snabbdom demo</title>
    <style>
      .ordBtn {
        border: 1px solid #eee;
        display: inline-block;
        padding: 6px;
        cursor: pointer;
        margin-left:10px;
      }
      .sn {
        width: 20px;
        display: inline-block;
        padding: 0 10px;
      }
      .title {
        width: 200px;
        display: inline-block;
        overflow: auto;
        word-break: break-all;
        padding: 0 10px;
      }
      .desc {
        display: inline-block;
        width: 400px;
        padding: 0 10px;
      }
      .del {
        color: red;
        display: inline-block;
        font-size: 30px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <h1>Top 10 movies</h1> -->
      <!-- <div class="left">
        <span>sort by:</span>
        <span class="ordBtn">rank</span>
        <span class="ordBtn">title</span>
        <span class="ordBtn">description</span>
      </div>
      <div class="right">
        <span class="ordBtn">Add</span>
      </div>
      <div class="clear"></div>
      <div class="list">
        <ul>
          <li>
            <span class="sn">1</span>
            <span class="title">The Shawshank Redemption</span>
            <span class="desc">Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.</span>
            <span class="del">x</span>
          </li>
        </ul>
      </div> -->
    </div>
    <script src="./src/04-example.js"></script>
  </body>
  
  </html>